import React, { forwardRef } from 'react';
import './index.scss';

export interface WasteStatItem {
  /**
   * 图标
   */
  icon: string;
  
  /**
   * 标签名称
   */
  label: string;
  
  /**
   * 数值
   */
  value: string;
}

export interface WasteVideoItem {
  /**
   * 场房名称
   */
  name: string;
  
  /**
   * 视频流地址或图片
   */
  videoUrl?: string;
  
  /**
   * 预览图片
   */
  thumbnail?: string;
  
  /**
   * 是否在线
   */
  online?: boolean;
}

export interface WasteManagementProps {
  /**
   * 组件标题
   */
  title?: string;
  
  /**
   * 英文标题
   */
  englishTitle?: string;
  
  /**
   * 统计数据
   */
  statsData?: WasteStatItem[];
  
  /**
   * 视频监控数据
   */
  videoData?: WasteVideoItem[];
  
  /**
   * 点击事件
   */
  onClick?: () => void;
  
  /**
   * 点击统计项
   */
  onStatClick?: (item: WasteStatItem) => void;
  
  /**
   * 点击视频项
   */
  onVideoClick?: (item: WasteVideoItem) => void;
  
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  
  /**
   * 自定义类名
   */
  className?: string;
  
  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const WasteManagement = forwardRef<HTMLDivElement, WasteManagementProps>((props, ref) => {
  const {
    title = '垃圾管理',
    englishTitle = 'Waste Management',
    statsData = [
      { icon: 'http://localhost:8085/static/images/01备份.png', label: '垃圾量展示', value: '48,003' },
      { icon: 'http://localhost:8085/static/images/01.png', label: '清运时间', value: '14:40' },
      { icon: 'http://localhost:8085/static/images/01.png', label: '集置点所属单位', value: 'XXXX' },
      { icon: 'http://localhost:8085/static/images/01.png', label: '监控-漫溢预警', value: 'XXX' }
    ],
    videoData = [
      { 
        name: '垃圾场房1', 
        thumbnail: 'http://localhost:8085/static/images/sheshihuanjing/编组44.png',
        online: true 
      },
      { 
        name: '垃圾场房2', 
        thumbnail: 'http://localhost:8085/static/images/sheshihuanjing/编组44.png',
        online: true 
      }
    ],
    onClick,
    onStatClick,
    onVideoClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const handleStatClick = (item: WasteStatItem) => {
    onStatClick?.(item);
  };

  const handleVideoClick = (item: WasteVideoItem) => {
    onVideoClick?.(item);
  };

  const componentClassName = [
    'hzdz-waste-management',
    className
  ].filter(Boolean).join(' ');

  // 格式化数值显示
  const formatValue = (value: string): string => {
    // 如果是数字且大于999，添加千位分隔符
    if (/^\d+$/.test(value) && parseInt(value) > 999) {
      return parseInt(value).toLocaleString();
    }
    return value;
  };

  // 渲染单个统计项
  const renderStatItem = (item: WasteStatItem, index: number) => (
    <div 
      key={index} 
      className="hzdz-waste-management__stat-item"
      onClick={() => handleStatClick(item)}
    >
      <div className="hzdz-waste-management__stat-icon">
        <img src={item.icon} alt={item.label} />
      </div>
      <div className="hzdz-waste-management__stat-info">
        <div className="hzdz-waste-management__stat-value">
          {formatValue(item.value)}
          {index === 0 && <div className="hzdz-waste-management__stat-unit"></div>}
        </div>
        <div className="hzdz-waste-management__stat-label">{item.label}</div>
      </div>
    </div>
  );

  // 渲染视频项
  const renderVideoItem = (item: WasteVideoItem, index: number) => (
    <div 
      key={index} 
      className="hzdz-waste-management__video-item"
      onClick={() => handleVideoClick(item)}
    >
      <div className="hzdz-waste-management__video-header">
        <span className="hzdz-waste-management__video-name">{item.name}</span>
        <div className={`hzdz-waste-management__video-status ${item.online ? 'online' : 'offline'}`}></div>
      </div>
      <div className="hzdz-waste-management__video-content">
        {item.thumbnail && (
          <img 
            src={item.thumbnail} 
            alt={item.name}
            className="hzdz-waste-management__video-thumbnail"
          />
        )}
      </div>
    </div>
  );

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={style}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 顶部标题栏 */}
      <div className="hzdz-waste-management__header">
        <div className="hzdz-waste-management__header-content">
          <div className="hzdz-waste-management__title">{title}</div>
          <div className="hzdz-waste-management__english-title">{englishTitle}</div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="hzdz-waste-management__content">
        {/* 统计数据区域 */}
        <div className="hzdz-waste-management__stats">
          <div className="hzdz-waste-management__stats-row">
            {statsData.slice(0, 2).map((item, index) => renderStatItem(item, index))}
          </div>
          <div className="hzdz-waste-management__stats-row">
            {statsData.slice(2, 4).map((item, index) => renderStatItem(item, index + 2))}
          </div>
        </div>

        {/* 视频监控section */}
        <div className="hzdz-waste-management__video-section">
          <div className="hzdz-waste-management__section-header">
            <div className="hzdz-waste-management__section-dot"></div>
            <span className="hzdz-waste-management__section-title">视频监控</span>
            <div className="hzdz-waste-management__section-line"></div>
            <div className="hzdz-waste-management__section-arrows">
              <div className="hzdz-waste-management__section-arrow hzdz-waste-management__section-arrow--inactive"></div>
              <div className="hzdz-waste-management__section-arrow"></div>
            </div>
          </div>
          
          {/* 视频监控内容 */}
          <div className="hzdz-waste-management__video-list">
            {videoData.map((item, index) => renderVideoItem(item, index))}
          </div>
        </div>
      </div>
    </div>
  );
});

WasteManagement.displayName = 'WasteManagement';

export default WasteManagement;